<template>
	<view class="wrap">
		<view class="banners">
			<u-swiper mode="none" :border-radius="0" height="440" :list="list"></u-swiper>
		</view>
		<view class="notice">
			<view class="inner">
				<view class="icon">
					公告
				</view>
				<view class="barCont">
					<u-notice-bar mode="vertical" padding="12rpx 0" bg-color="#FFF0D3" color="#E18028" :more-icon="false"
						:volume-icon="false" font-size="24" :list="info"></u-notice-bar>
				</view>
			</view>

		</view>
		<view v-if="navs.length">
			<view v-for="item in navs" class="icons">
				<view class="tit">
					{{item.name || ''}}
				</view>
				<view v-if="item.functionList.length" class="containerBox">
					<view class="container">
						<view class="box1" @click="navTo(inner)" v-for="inner in item.functionList">
							<image :src="inner.icon" mode=""></image>
							<view class="name">
								{{inner.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>
<script>
	
	export default {
		data() {
			return {
				navs:[],
				info: [
					// '寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴',
					// '平明送客楚山孤寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴',
					// '洛阳亲友如相问寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴',
					// '一片冰心在玉壶寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴'
				],
				list: [
					// {
					// 	image: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
					// },
					// {
					// 	image: 'https://cdn.uviewui.com/uview/swiper/2.jpg'
					// },
					// {
					// 	image: 'https://cdn.uviewui.com/uview/swiper/3.jpg'
					// }
				],
			};
		},
		onShow() {
			this.adListFn() //按条件查询广告列表信息
			this.appNoticeListFn() //应用公告列表查询接口
			this.listForAppFn()  // 授权应用功能维护列表信息接口
		},
		methods: {
			// 授权应用功能维护列表信息接口
			listForAppFn(){
				console.log(this.vuex_token?.adminUserId,'&&&&&&&&&&&&&&');
				this.$u.api.listForApp({
					userId:this.vuex_token?.adminUserId
				})
					.then(res => {
						this.navs = res.data
					});
			},
			// 应用公告列表查询接口
			appNoticeListFn(){
				
				this.$u.api.appNoticeList({})
					.then(res => {
						this.info = res.data?.map(r=>r.title)
						console.log(this.info,666666);
					});
			},
			//按条件查询广告列表信息
			adListFn(){
				this.$u.api.adList({
						entityCountLimit: 1,
						groupCode:'INDEX',
					})
					.then(res => {
						console.log(res,666666);
						this.list = res.data?.map(r=>{
							return{
								...r,
								image:r.imageUrl
							}
						})
					});
			},
			navTo(url) {
				
				// 查询客户
				// uni.navigateTo({
				// 	url:"/subPack/crm/index"
				// })
				// 新增客户
				// uni.navigateTo({
				// 	url:"/subPack/crm/addCustomers/index"
				// })
				// APP用户
				// uni.navigateTo({
				// 	url:"/subPack/app/index"
				// })
				// 开通记录
				// uni.navigateTo({
				// 	url:"/subPack/marketing/marketingLanguage"
				// })
				
				uni.navigateTo({
					url: url.url
				});
			},

		}
	};
</script>
<style>
	page {
		background: #FAFAFA;
		/* background: #ccc; */
	}
</style>
<style lang="scss" scoped>
	.other {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 32rpx;

		&:after {
			content: '';
			width: 128rpx;
			display: flex;
		}


		.itemfn {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 30rpx;
			width: 128rpx;
			font-size: 28rpx;
			margin-right: 52rpx;

			&:nth-child(4n) {
				margin-right: 0;
			}



			.fn_img {
				width: 48rpx;
				margin-bottom: 16rpx;
			}
		}

	}

	.wrap {
		.notice {
			padding: 16rpx;
			border-radius: 24px;
			background: #FAFAFA;
			margin-top: -48rpx;

			position: relative;
			z-index: 99;
			

			.inner {
				border-radius: 168rpx;
				background: #FFF0D3;
				padding: 0 28rpx 0 0;
				display: flex;
				align-items: center;
				padding-left:16rpx ;

				.icon {
					
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: justified;
					width: 88rpx !important;
					height: 40rpx;
					background: #FFA049;
					border-radius: 80rpx 80rpx 80rpx 80rpx;
				}
				.barCont{
					flex:1;
				}
			}
		}

		.icons {
			margin: 16rpx 32rpx;
			background: #FFFFFF;
			// background: #ccc;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.tit {
				padding: 24rpx 32rpx;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 28rpx;
				color: #FA4A53;
				line-height: 39rpx;
			}

			.containerBox {
				// padding: 0 0 0 10rpx;
				// background: red;
			}

			.container {
				display: flex;
				flex-wrap: wrap;
				/* 允许换行 */
				align-content: flex-start;
				/* 每行左对齐 */
				justify-content: space-between;


				&::after {
					content: "";
					flex: auto;
				}

				.box1 {
					width: 23%;
					// min-width: 122rpx;
					margin-bottom: 40rpx;
				 margin-right: 2%;

					&:nth-child(4n) {
						margin-right: 0;
					}

					// width: calc(25% - 20px); /* 盒子宽度为总宽度的25%，减去间隔 */
					// margin: 10px; /* 设置间隔 */

					image {
						display: block;
						margin: 0 auto;
						width: 48rpx;
						height: 48rpx;
					}

					.name {
						margin-top: 16rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 26rpx;
						color: #4E5969;
						text-align: center;
						line-height: 30rpx;
					}
				}
			}


			.iconlist {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				width: 100%;

				&:after {
					content: '';
					width: 23.5%;
					display: flex;
				}

				.item {
					margin-bottom: 40rpx;
					width: 23.5%;
					margin-right: 2%;
					text-align: center;

					// text-align: center;
					// &.item:nth-child(3n-2),
					// &.item:nth-child(3n-1),
					// &.item:nth-child(3n+1) {
					//   text-align: left;
					// }
					&:nth-child(4n+0) {
						margin-right: 0;
					}

					// https://www.cnblogs.com/veidoo/p/14207012.html

					// .item:nth-child(4n+1) {
					//     /* 添加你想要的样式 */
					// 	text-align: left;
					// }

					image {
						margin: 0 auto;
						width: 48rpx;
						height: 48rpx;
					}

					.name {
						margin-top: 16rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 26rpx;
						color: #4E5969;
						line-height: 30rpx;
					}
				}
			}
		}
	}
</style>
